/*! _breadcrumbs.scss | Vuero | Css Ninja 2020-2021 */

/*
    1. Breadcrumbs
    2. Breadcrumbs Dark mode
*/

/* ==========================================================================
1. Breadcrumbs
========================================================================== */

.breadcrumb {
  &.is-narrow {
    margin-bottom: 10px;
  }

  ul {
    li {
      &:first-child {
        .breadcrumb-item {
          padding-left: 0;
        }
      }

      .breadcrumb-item {
        font-family: var(--font);
        color: var(--light-text);
        padding: 0 0.75em;

        .icon {
          &.is-solo {
            svg {
              top: 2px;
            }
          }

          svg {
            position: relative;
            top: 0;
            height: 16px;
            min-width: 16px;
          }
        }
      }
      a {
        &.breadcrumb-item {
          &:hover {
            color: var(--primary);
          }
        }
      }
    }
  }
}

/* ==========================================================================
2. Breadcrumbs Dark mode
========================================================================== */

.is-dark {
  .breadcrumb {
    ul {
      li {
        a {
          &.breadcrumb-item {
            &:hover {
              color: var(--primary);
            }
          }
        }
      }
    }
  }
}
